<!--
 * @Author: 陆成杰
 * @Date: 2022-06-24 13:54:01
 * @LastEditTime: 2022-06-27 20:04:44
 * @LastEditors: 陆成杰
 * @FilePath: /boe/src/views/home/home-children/Distribution.vue
 * Copyright (c) ${now_year} by zucc-陆成杰, All Rights Reserved. 
-->
<template>
  <div class="echart" id="mychart" :style="myChartStyle"></div>
</template>
 
<script>
import * as echarts from "echarts";
import { getGroupCount } from "../../../axios/home";

export default {
  data() {
    return {
      xData: [], //横坐标
      yData: [], //数据
      myChartStyle: { float: "left", width: "100%", height: "260px" }, //图表样式
    };
  },
  mounted() {
    this.GroupCount();
    setTimeout(() => {
      this.initEcharts();
    }, 500);
  },
  methods: {
    GroupCount(){
      getGroupCount().then((res) => {
        console.log(res);
        this.xData = res.data.map( item => {
          return item.Name
        })
        this.yData = res.data.map( item => {
          return item.Cnt
        })
      })
    },
    initEcharts() {
      // 基本柱状图
      const option = {
        color: ["rgb(24, 144, 255)"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        xAxis: {
          data: this.xData,
          axisLine: {
            lineStyle: {
              type: "solid",
              color: "#fff", //坐标线的颜色
            },
          },
          axisTick: {
            alignWithLabel: true,
          },
        },
        yAxis: {
          max: 10,
          // min: 0,
          splitNumber: 1,
          splitLine: {
            show: true,
            lineStyle: { type: "dashed", color: "rgb(108, 116, 129)" },
          },
          axisLine: {
            lineStyle: {
              type: "solid",
              color: "#fff", //坐标线的颜色
            },
          },
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
          },
        },
        series: [
          {
            type: "bar", //形状为柱状图
            barWidth: "12%",
            data: this.yData,
          },
        ],
      };
      const myChart = echarts.init(document.getElementById("mychart"));
      myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>